
export const addHoverCardComponent = (editor) => {
    const { Components } = editor;

    Components.addType('hover-card', {
        model: {
            defaults: {
                tagName: 'div',
                resizable: true, // 允许调整大小
                attributes: { class: 'cards1' },
                components:[
                    {
                tagName: 'div',
                draggable: false, // 不可拖动
                attributes: { class: 'card2' },
                components: [
                    {
                        type: 'text',
                        attributes: { class: 'card-content' },
                        content: '悬浮小卡片'
                    }
                ]
                    }
                    
                ],
                styles: `
                    .cards1 {
                width:300px;
                height:350px;
                display: flex;
    justify-content: center;
                }
                .card2 {
                    width: 90%;
                    height: 90%;
                    background: #fff;
                    transition: all 300ms;
                    }

                    .card-content{
                    position: relative;
                        top: 50%;
                        text-align: center;
                       
                        
                    }
                    .card2:hover {
                        opacity: 0.8;
                        transform: scale(1.10);
                    }
                `
            }
        }
    });

    editor.BlockManager.add('hover-card', {
        label: '悬浮卡片',
        content: { type: 'hover-card' },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#5f6368"><path d="m159-168-34-14q-31-13-41.5-45t3.5-63l72-156v278Zm160 88q-33 0-56.5-23.5T239-160v-240l106 294q3 7 6 13.5t8 12.5h-40Zm206-4q-32 12-62-3t-42-47L243-622q-12-32 2-62.5t46-41.5l302-110q32-12 62 3t42 47l178 488q12 32-2 62.5T827-194L525-84Zm-86-476q17 0 28.5-11.5T479-600q0-17-11.5-28.5T439-640q-17 0-28.5 11.5T399-600q0 17 11.5 28.5T439-560Zm58 400 302-110-178-490-302 110 178 490ZM319-650l302-110-302 110Z"/></svg>`,
        category: '卡片类',
    });
};
